<template>
  <div class="attr-item">
    <div class="attr-item-ul">
      <div
        class="attr-item-ul-li"
        v-for="(item, index) in curItems"
        :key="index"
      >
        <a class="li-title" @click="methods.onChangeEditItem(item, index)">
          {{ item.tab }}
        </a>
        <div class="li-icon" @click="methods.onChangeEditItem(item, index)">
          <Icon icon="ant-design:form-outlined" />
        </div>
        <div class="li-icon" @click="methods.onDeleteItem(index)">
          <Icon icon="ant-design:delete-outlined" />
        </div>
      </div>
      <a-button class="attr-item-add" @click="methods.onAddItem">
        添加一项
      </a-button>
    </div>
    <a-modal v-model:open="isEdit" title="修改标签项" @ok="methods.onConfirm">
      <div class="item-edit">
        <BwConfigInput v-model:value="curEditItem.tab" title="名称" />
        <BwConfigInput v-model:value="curEditItem.key" title="唯一key" />
        <BwConfigSwitch v-model:value="curEditItem.hidden" title="是否隐藏" />
        <BwConfigSwitch v-model:value="curEditItem.disabled" title="是否禁用" />
        <BwConfigSwitch
          v-model:value="curEditItem.isActive"
          title="是否默认选中"
        />
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { PropType, computed, defineComponent, ref } from 'vue'

import { BwTabsItemsModel } from './model'

import BwConfigInput from '../comItems/input/index.vue'
import BwConfigSwitch from '../comItems/switch/index.vue'

import { bwUtils } from '@/utils/main'
import { cloneDeep } from 'lodash-es'

export default defineComponent({
  name: 'BwTabsItems',
  components: {
    BwConfigInput,
    BwConfigSwitch,
  },
  props: {
    value: {
      type: [Array] as PropType<BwTabsItemsModel[]>,
      default: () => [],
    },
  },
  emits: ['update:value', 'change'],
  setup(props, { emit }) {
    /** 对象值 */
    const curItems = computed({
      get: (): BwTabsItemsModel[] => {
        return props.value ?? []
      },
      set: (value) => {
        emit('update:value', value)
        emit('change', value)
      },
    })

    /** 当前编辑项 */
    const curEditItem = ref({} as BwTabsItemsModel)
    /** 当前编辑项下标 */
    const curEditIndex = ref(0)

    /** 是否编辑 */
    const isEdit = ref(false)

    const methods = {
      onChangeEditItem(item: BwTabsItemsModel, index: number) {
        curEditItem.value = cloneDeep(item)
        curEditIndex.value = index
        isEdit.value = true
      },
      onDeleteItem(index: number) {
        curItems.value =
          curItems.value
            .filter((_, i) => i !== index)
            ?.map((item) => {
              return {
                tab: item.tab,
                key: item.key,
                hidden: item.hidden,
                disabled: item.disabled,
                isActive: item.isActive,
              }
            }) ?? []
      },
      onAddItem() {
        curEditIndex.value = curItems.value.length
        curEditItem.value = {
          id: bwUtils.getGuid(),
        }
        isEdit.value = true
      },
      onConfirm() {
        isEdit.value = false
        let arr = cloneDeep(curItems.value)
        arr[curEditIndex.value] = curEditItem.value
        curItems.value = arr
      },
    }

    return {
      curItems,
      isEdit,
      curEditItem,
      methods,
    }
  },
})
</script>

<style lang="less" scoped>
.attr-item {
  max-height: 70%;
  overflow: auto;

  .attr-item-ul {
    padding: 8px;
    background: #edeff3;
    margin: 8px;

    .attr-item-ul-li {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      line-height: 28px;
      height: 28px;
      white-space: nowrap;

      .li-title {
        flex: 1;
        font-size: 12px;
      }

      .li-icon {
        font-size: 16px;
        cursor: pointer;
        margin-left: 8px;
        opacity: 0.6;

        &:hover {
          opacity: 1;
        }
      }
    }
  }

  .attr-item-add {
    width: 100%;
  }
}

.item-edit {
  padding: 24px;
}
</style>
